import { h } from 'vue-demi'
import VsTree from '../core'

export const VsTreeComponent = {
  props: {
    data: Array | Object,
    options: Object,
    async: Boolean,
    animation: Boolean,
    draggable: Boolean,
    dropable: Boolean,
    hideRoot: Boolean,
    showCheckbox: Boolean,
    checkboxType: Object,
    showRadio: Boolean,
    radioType: String,
    showLine: Boolean,
    showIcon: Boolean,
    onlyShowLeafIcon: Boolean,
    highlightCurrent: Boolean,
    accordion: Boolean,
    nocheckParent: Boolean,
    sort: Boolean,
    checkOnClickNode: Boolean,
    checkFilterLeaf: Boolean,
    strictLeaf: Boolean,
    rootName: String,
    max: Number,
    lazy: Boolean,
    load: Function,
    format: Function,
    disabledKeys: Array,
    checkedKeys: Array,
    expandKeys: Array,
    keyword: String,
    expandClass: String,
    theme: String,
    breadcrumb: Object,
    virtual: Object,
    expandLevel: {
      type: Number,
      default: 1
    },
    indent: {
      type: Number,
      default: 10
    },
    showCount: {
      type: Number,
      default: 20
    },
    itemHeight: {
      type: Number,
      default: 26
    },

    maxHeight: String,
    minHeight: String,
    beforeCheck: Function,
    renderContent: Function,
    renderNode: Function,
    checkFilter: Function,
    searchFilter: Function,
    searchRender: Function,
    onDragstart: Function,
    onDragenter: Function,
    onDrop: Function,
    customNodeClick: Function
  },
  data() {
    const tree = {}
    const id = null
    return { tree, id }
  },
  watch: {
    max(newVal = 0) {
      this.setMaxValue(newVal)
    },
    keyword(newVal) {
      this.filter(newVal)
    }
  },
  created() {
    function S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    }
    const createUUID = () => {
      return `tree${S4() + S4()}${S4()}${S4()}${S4()}${S4()}${S4()}${S4()}`
    }
    this.id = createUUID()
  },
  mounted() {
    this.$nextTick(() => {
      this._vsinit()
    })
  },
  methods: {
    _vsinit() {
      this.tree.tree = new VsTree('#' + this.id, Object.assign({}, this.$props, {
        ...this.options,
        data: this.data,
        scroll: (event) => {
          this.$emit('scroll', event)
        },
        click: (event, node) => {
          this.$emit('click', event, node)
        },
        check: (event, node) => {
          this.$emit('check', event, node)
        },
        change: (node) => {
          this.$emit('change', node)
        },
        contextmenu: (event, node) => {
          this.$emit('node-contextmenu', event, node)
        },
        limitAlert: () => {
          this.$emit('limit-alert')
        }
      }))
      console.timeEnd('render:tree')
    },
    getNodeById(id) {
      return this.tree.tree.getNodeById(id)
    },
    getCheckedNodes() {
      return this.tree.tree.getCheckedNodes()
    },
    filter(value) {
      return this.tree.tree.filter(value)
    },
    setMaxValue(value = 0) {
      this.tree.tree.setMaxValue(value)
    }
  },
  render() {
    return h('div', { id: this.id }, this.$slots.default)
  }
}
